<template>
<div>
    <div v-if="progressInfos">
        <div class="mb-2"
            v-for="(progressInfo,index) in progressInfos"
             :key="index"
        >
            <span>{{progressInfo.fileName}}</span>
            <div class="progress">
                <div class="progress-bar progress-bar-info"
                     role="progressbar"
                     :aria-valuenow="progressInfo.percentage"
                     aria-valuemin="0"
                     aria-valuemax="100"
                     :style="{ width: progressInfo.percentage + '%' }"
                >
                    {{progressInfo.percentage}}
                </div>
            </div>
        </div>
    </div>
    <label class="btn btn-default">
        <input type="file" multiple @change="selectFile"/>
    </label>
    <button class="btn btn-success"
        :disabled="!selectedFiles"
            @click="uploadFiles"
    >
        上传
    </button>
    <div v-if="message" class="alert alert-light" role="alert">
        <ul>
            <li v-for="(ms,i) in message.split('\n')" :key="i">
                {{ ms }}
            </li>
        </ul>
    </div>
    <div class="card">
        <div class="card-header">文件列表</div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item"
                v-for="(file,index) in fileInfos"
                :key="index"
            >
                <a :href="file.url">{{ file.name }}</a>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
    import UploadFilesService from "@/services/UploadFilesService";

    export default {
        name: "upload-files",
        data(){
          return {
              selectedFiles: undefined,
              progressInfos: [],
              message: "",
              fileInfos: [],
          }
        },
        mounted() {
            UploadFilesService.getFiles().then((response)=>{
                this.fileInfos = response.data;
            })
        },
        methods: {
            selectFile(){
                this.progressInfos = [];
                this.selectedFiles = event.target.files;
            },
            uploadFiles(){
                this.message = "";
                for (let i = 0; i < this.selectedFiles.length ; i++) {
                    this.upload(i,this.selectedFiles[i]);
                }
            },
            upload(idx,file){
                this.progressInfos[idx] = { percentage: 0, fileName: file.name };
                UploadFilesService.upload(file,(event) => {
                    this.progressInfos[idx].percentage = Math.round(100 * event.loaded / event.total);
                })
                .then((response) => {
                    let prevMessage = this.message ? this.message + "\n" : "";
                    this.message = prevMessage + response.data.message;
                    return UploadFilesService.getFiles();
                })
                .then((files)=>{
                    this.fileInfos = files.data;
                })
                .catch(()=>{
                    this.progressInfos[idx].percentage = 0;
                    this.message = "Could not upload the file:" + file.name;
                })
            }
        }
    }
</script>

<style scoped>

</style>